window.onload = function() 
{
    downTime();
    bannerEffect();
};
//倒计时
function downTime(){
    var spans=document.querySelector('.sk_time').querySelectorAll('span');
    var totalTime=1*60*60;
    var timer = setInterval(()=>{
        totalTime--;
        if(totalTime<0){
            clearInterval(timer);
            return;
        }
        var h= Math.floor(totalTime/3600);
        var m=Math.floor(totalTime%3600/60);
        var s=Math.floor(totalTime%60);
        spans[0].innerHTML=Math.floor(h/10);
        spans[1].innerHTML=Math.floor(h%10);
        spans[3].innerHTML=Math.floor(m/10);
        spans[4].innerHTML=Math.floor(m%10);
        spans[6].innerHTML=Math.floor(s/10);
        spans[7].innerHTML=Math.floor(s%10);
    },1000)
}


function bannerEffect() {
    var banner = document.querySelector('.hm_banner');
    var imgBox = banner.querySelector('ul:first-of-type');
    var first = imgBox.querySelector('li:first-of-type');
    var last = imgBox.querySelector('li:last-of-type');
    imgBox.appendChild(first.cloneNode(true));
    imgBox.insertBefore(last.cloneNode(true), imgBox.firstChild);
    var lis = imgBox.querySelectorAll('li');
    var count = lis.length;
    var bannerWidth = banner.offsetWidth; // 修正大小写
    imgBox.style.width = count * bannerWidth + 'px'; // 设置图片盒子的宽度

    for (var i = 0; i < lis.length; i++) {
        lis[i].style.width = bannerWidth + 'px'; // 设置每个li元素的宽度
    }

    var index = 1;
    imgBox.style.left = -bannerWidth + 'px';

    window.onresize = function() {
        bannerWidth = banner.offsetWidth;
        imgBox.style.width = count * bannerWidth + 'px'; // 设置图片盒子的宽度
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.width = bannerWidth + 'px'; // 修正赋值语法
        }
        imgBox.style.left = -index * bannerWidth + 'px';
    }

    var timerId;
    var startTime = function() {
        timerId = setInterval(function() {
            index++;
            imgBox.style.transition = 'left 0.5s ease-in-out';
            imgBox.style.left = (-index * bannerWidth) + 'px';
            setTimeout(function() {
                if (index == count - 1) {
                    index = 1;
                    imgBox.style.transition = 'none';
                    imgBox.style.left = (-index * bannerWidth) + 'px';
                }
            }, 500);
        }, 2000);
    }
    startTime();

    var startX, moveX, distanceX;
    var isEnd = true;

    imgBox.addEventListener('touchstart', function(e) {
        clearInterval(timerId);
        startX = e.targetTouches[0].clientX;
    });

    imgBox.addEventListener('touchmove', function(e) {
        if (isEnd == true) {
            moveX = e.targetTouches[0].clientX;
            distanceX = moveX - startX;
            imgBox.style.transition = 'none'; // 清除过渡样式
            imgBox.style.left = (-index * bannerWidth + distanceX) + 'px';
        }
    });

    imgBox.addEventListener('touchend', function(e) {
        isEnd = false;
        if (Math.abs(distanceX) > 100) {
            index += (distanceX > 0) ? -1 : 1; // 根据方向调整索引
        }
        imgBox.style.transition = 'left 0.5s ease-in-out';
        imgBox.style.left = (-index * bannerWidth) + 'px';
        
        if (Math.abs(distanceX) <= 0) {
            imgBox.style.transition = 'left 0.5s ease-in-out';
            imgBox.style.left = (-index * bannerWidth) + 'px';
        }

        startX = 0;
        moveX = 0;
        distanceX = 0;
    });

    var setIndicator = function(index) {
        var indicators = banner.querySelector('ul:last-of-type').querySelectorAll('li');
        for (var i = 0; i < indicators.length; i++) {
            indicators[i].classList.remove('active');
        }
        indicators[index - 1].classList.add('active');
    }

    imgBox.addEventListener('webkitTransitionEnd', function() {
        if(index==count-1){
                 index=1;
                 imgBox.style.transition='none';
                 imgBox.style.left=-index * bannerWidth+'px';
             }else if(index==0){
                index=count-2;
                imgBox.style.transition='none';
                 imgBox.style.left=-index*bannerWidth+'px';
             }
        setIndicator(index);
        setTimeout(function() {
            isEnd = true;
            clearInterval(timerId);
            startTime();
        }, 1000);
    });
}
